<template>
  <div class="goodsdetail-container">
    <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
      <div class="ball" v-show="ballVisible"></div>
    </transition>
    <!-- 轮播图 -->
    <div class="mui-card">
      <!--内容区-->
      <div class="mui-card-content">
        <mt-swiper :lunbotu="lunbotu" img_name="src"></mt-swiper>
      </div>
    </div>

    <!-- 商品信息 -->
    <div class="mui-card">
      <!--页眉，放置标题-->
      <div class="mui-card-header">{{goodsinfo.title}}</div>
      <!--内容区-->
      <div class="mui-card-content">
        <div class="price">
          市场价 :
          <span class="old">¥ {{goodsinfo.market_price}}</span>
          销售价 :
          <span class="new">¥ {{goodsinfo.sell_price}}</span>
        </div>
        <div class="number">
          购买数量:
          <mt-nobox
            :max="goodsinfo.stock_quantity"
            v-if="goodsinfo.stock_quantity"
            @get-num="getSlectedNum"
          />
        </div>
        <div class="operation">
          <mt-button type="primary" size="small">立即购买</mt-button>
          <mt-button type="danger" size="small" @click="addToCart">加入购物车</mt-button>
        </div>
      </div>
    </div>

    <!-- 商品参数 -->
    <div class="mui-card">
      <!--页眉，放置标题-->
      <div class="mui-card-header">商品参数</div>
      <!--内容区-->
      <div class="mui-card-content">
        <p>商品货号: {{goodsinfo.goods_no}}</p>
        <p>库存情况: {{goodsinfo.stock_quantity}} 件</p>
        <p>上架时间: {{goodsinfo.add_time | dateFromat}}</p>
      </div>
      <!--页脚，放置补充信息或支持的操作-->
      <div class="mui-card-footer button-group">
        <mt-button type="primary" plain size="large" @click="handleJumpIntroduce">图文介绍</mt-button>
        <mt-button type="danger" plain size="large" @click="handleJumpComment">商品评论</mt-button>
      </div>
    </div>
  </div>
</template>

<script>
import MtSwiper from "../sub-components/Swiper.vue";
import MtNobox from "../sub-components/goodsdetail_nobox.vue";
import { mapMutations } from "vuex";
export default {
  components: {
    MtSwiper,
    MtNobox
  },
  created() {
    // 获取轮播图
    this.__getLunbutu();
    // 获取商品详情数据
    this.__getGoodsInfoById();
  },
  props: ["id"],
  data() {
    return {
      lunbotu: [], // 轮播图
      goodsinfo: {},
      ballVisible: false,
      selectNumber: 1
    };
  },
  methods: {
    // ...mapMutations(["addToCart"]),
    // ========= 发送请求 ==========
    async __getLunbutu() {
      const { data: res } = await this.$http.get(`getthumimages/${this.id}`);
      if (res.status !== 0) return;
      this.lunbotu = res.message;
    },
    async __getGoodsInfoById() {
      const { data: res } = await this.$http.get("goods/getinfo/" + this.id);
      if (res.status !== 0) return;
      this.goodsinfo = res.message[0];
    },
    // ========= 事件监听 ===========
    handleJumpIntroduce() {
      this.$router.push(`/home/goodsdesc/${this.id}`);
    },
    handleJumpComment() {
      this.$router.push(`/home/goodscomment/${this.id}`);
    },
    beforeEnter(el) {
      // 入场函数之前,设置小球的起始状态
      el.style.transform = "translate(0,0)";
    },
    enter(el, done) {
      //  入场函数结束之后, 小球的终止状态
      el.offsetWidth;

      // 获取小球距离视口的位置
      const ballPosi = el.getBoundingClientRect();
      // 获取徽标距离视口的位置
      const badgePosi = document
        .getElementById("badge")
        .getBoundingClientRect();

      const left = badgePosi.left - ballPosi.left;
      const top = badgePosi.top - ballPosi.top;

      el.style.transform = `translate(${left}px,${top}px)`;
      el.style.transition = "all 0.5s cubic-bezier(.46,.04,.1,.49)";
      done();
      // 当入场动画结束以后, 需要手动调用一下done回调函数, 直接跳过小球的出场动画
    },
    afterEnter(el) {
      // 入场函数完成之后的回调函数
      this.ballVisible = !this.ballVisible;
    },
    getSlectedNum(num) {
      this.selectNumber = num;
    },
    addToCart() {
      this.ballVisible = true;
      // 提交到Vuex
      this.$store.commit('addToCart', {id:this.id,count:this.selectNumber,selected: true,sell_price:this.goodsinfo.sell_price})
      // this.addToCart({ id: this.id, count: this.selectNumber });
    }
  }
};
</script>

<style lang='scss' scoped>
.goodsdetail-container {
  background-color: #eee;
  overflow: hidden;

  .mui-card-content {
    padding: 10px;
  }
  .price {
    font-size: 14px;
    color: #999;
    padding: 5px 0;

    .old {
      text-decoration: line-through;
    }
    .new {
      font-size: 18px;
      font-weight: 700;
      color: red;
    }
  }

  .number {
    font-size: 14px;
    color: #999;
    padding: 5px 0;
  }
  .button-group {
    flex-direction: column;
    button + button {
      margin-top: 15px;
    }
  }
  .operation {
    margin-top: 10px;
  }
}

.ball {
  position: absolute;
  top: 360px;
  left: 135px;
  z-index: 999;
  width: 15px;
  height: 15px;
  background: red;
  border-radius: 50%;
}
</style>